<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
         <el-button type="success" @click="addDialogShow=true">添加</el-button>
        </el-form>
        <el-table :data="pageInfo.list" border style="width: 100%">
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="realname" label="真实姓名" />
          <el-table-column prop="createTime" label="入职时间"/>
          <el-table-column label="账号状态" >
            <template #default="scope">
            <el-switch
                v-model="scope.row.status"
                class="mb-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                active-text="启用"
                inactive-text="禁用"
                :active-value="0"
                :inactive-value="1"
                @change="updateStatus(scope.row.id)"
            />
            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template #default="scope">
              <el-button type="primary" @click="updatePwd(scope.row.id)">重置密码</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 20px;">
          <el-pagination background layout="prev, pager, next"
                         v-model:current-page="pageInfo.pageNum"
                         :page-count="pageInfo.pages"
                         @update:current-page="selectByPage" />
        </el-row>
      </el-card>
    </el-col>
  </el-row>
  <!-- 添加模态框开始 -->
  <el-dialog v-model="addDialogShow" title="添加商品" width="500px">
    <el-form>
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="admin.username" autocomplete="off" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密码" label-width="20%">
        <el-input v-model="admin.password" autocomplete="off" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="admin.phone" autocomplete="off" placeholder="请输入电话"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="admin.email" autocomplete="off" placeholder="请输入邮箱"/>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="admin.realname" autocomplete="off" placeholder="请输入真实姓名"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addDialogShow = false">取消</el-button>
        <el-button type="primary" @click="insert"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 添加模态框结束 -->



</template>
<script setup>
import {ref} from "vue";
import {useTokenStore} from "@/stores/token.js";
import adminApi from "@/api/adminApi.js";
import {ElMessage} from "element-plus";
const  tokenStore=useTokenStore();
const SERVER_ADDR=ref(import.meta.env.VITE_SERVER_ADDR);
const addDialogShow=ref(false);
const  admin= ref({
  username:null,
  password:'',
  phone:'',
  email:'',
  realname:'',
  createTime:'',
  status:null,
});
const  condition= ref({
  username:null,
  password:'',
  phone:'',
  email:'',
  realname:'',
  createTime:'',
  status:null,
});
//添加
function insert(){
  adminApi.insert(admin.value)
      .then(resp=>{
        if(resp.code==10000){
          ElMessage.success(resp.msg);
          addDialogShow.value=false;
          admin.value= {
            username: null,
            password: '',
            phone: '',
            email: '',
            realname: '',
            createTime: '',
            status: null,
          }
          selectByPage(1);
        }else {
          ElMessage.error(resp.msg)
        }
      })
}



//分页信息
const pageInfo=ref({
  pages:0,
  pageSize:0,
  pageNum:0
});
//
function updateStatus(id){
adminApi.updateStatus(id)
    .then(resp=>{
      if(resp.code==10000){
        ElMessage.success(resp.msg)
      }else {
        ElMessage.error("修改失败")
      }
    })
}
function updatePwd(id){
  adminApi.updatePwd(id)
      .then(resp=>{
        if(resp.code==10000){
          ElMessage.success(resp.msg)
        }else {
          ElMessage.error("重置失败")
        }
      })
}

//分页查询
function selectByPage(pageNum){
  adminApi.selectByPage(condition.value,pageNum,10)
      .then(resp => {
       if(resp.code==10000){
         pageInfo.value=resp.data
       }else {
         ElMessage.success(resp.msg);
       }
      })
}

selectByPage(1);
</script>
<style scoped>
.avatar{
  width: 170px;
  height: 170px;
  display: block;
  border: 1px dotted #dcdfe6;
  border-radius: 5px;
}
.el-icon{
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>